How To Add Bootstrap To WordPress?

454 Views
0 rating based on 0 reviews

The Bootstrap framework allows you to create responsive layouts. Responsive web is all about approrpiately adjusting the layout and content of your website depending on screen size and dpi. If you have ever tried resizing the browser window after opening a website, you have noticed that such websites often appear in a mess, without clear links and without adapting to the size of your monitor or mobile device. On this site, you can find an example of how to use several Bootstrap components.

Add Bootstrap to WordPress

Bootstrap is an open-source and free to use framework for developing web-based works like sites or apps. It has a lot of HTML and CSS templates, interfaces and elements to be used in the front-end. It also supports Javascript extensions. So with these features, you can quickly design and customize your projects and for this, it is used globally everywhere. You can download ready to use codes, source files, or examples to make your life easy.

On the other hand, WordPress is a site where you can create and customize themes for your website build. It’s a CMS or content management system with a lot of themes you can choose from and use. Also, it got a dashboard system for managing the content of your site.

Fro using the bootstrap framework in your site made in WordPress you just have to follow some simple steps. These steps are discussed briefly in this article for you to follow through.

Before You Get Started

You need to ensure a few things before you start the tutorial. So please follow the instruction below for removing any interruption in this process:-

1).  You need basic ideas about the bootstrap version you use. For working with the basic commands of bootstrap you need to know the uses of those commands.

2).  You need and WordPress id and have to know the basics of WordPress. Mainly what is a theme or where is the content directory and where to find it to copy the code.

Adding Bootstrap to WordPress

Follow the below steps for adding Bootstrap to WordPress:-

1).  In this method, you have to add CDN path of bootstrap to your functions.php file. You need to copy the latest version of CDN path or download it from https://getbootstrap.com/ site.

2).  Now you have to open the functions.php file. Which you will find in the WordPress theme directory. The location of this directory is generally “wp-content/themes/theme-folder/functions.php).

the WordPress themes folder

3).  Now if you are already enquiring your styles or scripts with various functions your functions.php may look like the below.

“ function your_script_enqueue() {

wp_enqueue_style( 'customstyle', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');

        wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' );

           }

                     add_action( 'wp_enqueue_scripts', 'your_script_enqueue' ); ”

4).  Now we have to add our bootstrap CDN link of CSS and Javascript files here. You may put the file links before the existing code of your so that your Bootstraps will load priorly and you can overwrite or replace them as your need.

5).  After adding the bootstrap code it’ll kind of look like this. Here the bold codes are the bootstrap code you copied or downloaded from the official bootstrap website.

“function your_script_enqueue() {

                                                wp_enqueue_script( 'bootstrap_js',

'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );

                                               wp_enqueue_style( 'bootstrap_css',

'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );

wp_enqueue_style( 'custom_style', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');

wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' );

}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );”

6).  Be sure to copy the latest bootstrap version code from the site for it to working properly with the WordPress theme.

So this is how you can add Bootstrap to WordPress if you follow the steps properly according to this article.

Summary: Add Bootstrap to WordPress

  • Download Bootstrap
  • Copy the bootstrap files
  • Connecting files to WordPress
  • Registering scripts in WordPress
  • Enqueueing jQuery in WordPress
  • Enqueue our custom script and CSS
  • Adding a navbar dropdown menu to our theme
Related Questions